<template>
  <el-dialog title="销售订单审批"
             :visible.sync="open"
             :modal= false
             width="80%"
             center
             @close="cancel"
  >
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeTab" >
      <el-tab-pane  :key="1" label="订单信息" name="订单信息">
        <div style="font-size: 20px;">订单信息</div>
        <!--横线组件纯纯为了页面好看-->
        <el-divider></el-divider>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">

          <el-row>
            <el-col :span="8">
              <el-form-item label="销售订单编号" prop="soNumber">
                <el-input v-model="form.soNumber" placeholder="请输入销售订单编号" :readonly="optType == 'view'"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">

            </el-col>
            <el-col :span="10">
              <el-form-item label="销售订单名称" prop="soName">
                <el-input v-model="form.soName" placeholder="请输入销售订单名称" :readonly="optType == 'view'"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="客户ID" prop="clientId" style="display: none;">
                <el-input v-model="form.clientId" placeholder="请输入客户ID" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户编码" prop="clientCode">

                <ClientSelect ref="clientSelect"> </ClientSelect>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称" prop="clientName">
                <el-input v-model="form.clientName" readonly />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="订单日期" prop="orderDate">
                <el-date-picker clearable
                                v-model="form.orderDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择订单日期"
                                :disabled="optType == 'view'"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预计交货日期" prop="deliveryDate">
                <el-date-picker clearable
                                v-model="form.deliveryDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择预计交货日期"
                                :disabled="optType == 'view'"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="销售人员" prop="salesPerson">
                <UserSelect ref="userSelect"  ></UserSelect>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态">
                <el-input v-model="form.status" readonly />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="备注" prop="remarks">
            <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" :readonly="optType == 'view'"/>
          </el-form-item>
          <el-form-item label="合同" prop="fileUrl">
            <FileUpload
              :limit="1"
              :fileSize="100"
              :fileType="fileType"
              :value="fileList"
              :optType="optType"
             >
            </FileUpload>
          </el-form-item>
        </el-form>
        <!--横线组件纯纯为了页面好看-->
        <el-divider v-if="form.soId !=null" content-position="center">产品信息</el-divider>
        <el-card shadow="always" v-if="form.soId != null" class="box-card">
          <SoOrderLine :soId="form.soId" :optType="optType"></SoOrderLine>
        </el-card>
      </el-tab-pane>
      <el-tab-pane  :key="2" label="审批流程" name="审批流程">
        <el-timeline id="approveTimeLine">
          <el-timeline-item
            v-for="item in approveFlow"
            :key="item.businessCode"
            :timestamp="item.createTimeLog"
            placement="top"
            :icon="item.stepNickNameLog?'el-icon-success':''"
            :color="item.stepNickNameLog?'#13ce66':''"
          >
            <el-card>
              <h3>{{ item.stepNickNameLog }} <b>{{item.stepName}}</b><span style=" font-weight:800;" :style="{ color: item.statusLog >= 1 ? 'green' : (item.statusLog == 0 ? '' : 'red') }">
    {{item.statusLog?item.statusLog>=1?'同意':item.statusLog==0?'':'驳回':''}} </span></h3>
              <p v-if="item.stepTypeLog!=0&&item.stepTypeLog!=null" style="padding-top: 20px;">审批意见：{{ item.remark }}</p>
            </el-card>
            </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <el-tab-pane  :key="3" label="进行审批" name="进行审批" v-if="approveFlag==true">
        <el-form ref="approveForm" :model="approveForm" :rules="approveRules" label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="审批意见" prop="remark">
                <el-input type="textarea" placeholder="请输入审批意见" v-model="approveForm.remark"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="submitForm(true)">同 意</el-button>
                <el-button type="danger" @click="submitForm(false)">驳 回</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
  </el-dialog>
</template>

<script>
import { getOrder, approveFlow, approve} from "@/api/mes/xs/order";
import SoOrderLine from "./line.vue";
import FileUpload from "@/components/FileUpload/index"
import ClientSelect from "@/components/clientSelect/single.vue";
import UserSelect from "@/components/userSelect/single.vue";

export default {
  name: "approveView",
  dicts: ['erp_payment_type'],
  components: { ClientSelect, SoOrderLine, UserSelect, FileUpload },
  props: {
    show: false,
    id: null,
    approveFlag:false
  },
  data() {
    return {
      activeTab:'订单信息',
      open:this.show,
      approveFlow:[{}],
      // 查看开关
      optType: 'view',
      // 上传文件类型
      fileType: ["pdf"],
      // 上传文件列表
      fileList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 添加的商品信息表格数据
      addGoodsList: [],
      // 表单参数
      form: {},
      approveForm:{},
      // 表单校验
      rules: {
      },
      approveRules: {
        remark: [
          { required: true, message: "请输入审批意见", trigger: "blur" },
          { min: 1, max: 200, message: "长度在 1 到 200 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
   //this.init(id)
  },
  watch: {
    show(val,old) {
      if (val) {
        this.open = true;
        this.init(this.id);
      }else{
        this.open=false;
      }
    }
  },
  methods: {
    init(id){
      this.approveForm={remark:''};
      getOrder(id).then(response => {
        this.activeTab='订单信息';
        this.form = response.data;
        this.xsOrderLineList = response.data.xsOrderLineList;
        response.data.fileUrl === null ? this.fileList = [] : this.fileList.push(response.data.fileUrl);
        approveFlow(this.form.soNumber).then(re => {
          this.approveFlow = re.data;
        })
      });
    },

    // 取消按钮
    cancel() {
      this.$parent.cancelApprove();

    },
    /** 新增提交按钮 */
    submitForm(isYes) {
      let that = this;
      let words=isYes?'通过':'驳回';
      this.$refs["approveForm"].validate(valid => {
        if (valid) {
          that.$modal.confirm(`是否确认审批${words}？`).then(function () {
            approve({
              'businessId': that.form.soId,
              'remark': that.approveForm.remark,
              'isYes': isYes
            }).then(response => {
              that.$modal.msgSuccess("操作成功");
              that.open = false;
              that.$parent.getList();
              that.cancel();
            })
          });
        }
      });
    },
  }
};
</script>

<style >
#approveTimeLine .el-timeline-item__node--normal{
  width: 18px;
  height: 18px;
  left: -4px;
}
</style>
